<html>
<head>
<!-- charger ici tout le JS -->
<script src="js/IO.js"></script>
<script src="js/Printer.js"></script>
<script src="js/Location.js"></script>
<script src="js/UserInfo.js"></script>
<script src="js/Move.js"></script>
<script src="js/MoveLinear.js"></script>
<script src="js/MoveJump.js"></script>
<script src="js/Piece.js"></script>
<script src="js/PieceRook.js"></script>
<script src="js/PieceBishop.js"></script>
<script src="js/PieceQueen.js"></script>
<script src="js/PieceKnight.js"></script>
<script src="js/PieceKing.js"></script>
<script src="js/PiecePawn.js"></script>
<script src="js/ChessBoard.js"></script>
<script src="js/main.js"></script>
<style>

#logdiv {
	margin-top: 20px;
height: 8em;
		margin-left: auto;
		margin-right: auto;
width: 512px;
border: 1px solid red;
overflow: auto;
		  font-size: 0.8em;
		  font-family: fixed, monospace;
}

#logdiv p {
margin: 0px;
}

#squareboard {
	margin-left: auto;
	margin-right: auto;
width: 512px;
height: 512px;
		border-width: 3px 3px 3px 3px;
		border-style: solid;
		border-color: black;
}

.square {
float:left;
width: 62px;
height: 62px;
margin: 0px;
		border-width: 1px 1px 1px 1px;
		border-style: solid;
		border-color: black;
color: white;
	   text-align: center;
	   font-weight: bold;
}

.square.white { background-image: url(pics/white_bg-124.png); }
.square.black { background-image: url(pics/black_bg-124.png); }

.piece {
width: 64px;
height: 64px;
margin: 0px;
padding: 0px;
}

.white_rook { background-image: url(pics/white_rook-124.png); }
.white_knight { background-image: url(pics/white_knight-124.png); }
.white_bishop { background-image: url(pics/white_bishop-124.png); }
.white_king { background-image: url(pics/white_king-124.png); }
.white_queen { background-image: url(pics/white_queen-124.png); }
.white_pawn { background-image: url(pics/white_pawn-124.png); }

.black_rook { background-image: url(pics/black_rook-124.png); }
.black_knight { background-image: url(pics/black_knight-124.png); }
.black_bishop { background-image: url(pics/black_bishop-124.png); }
.black_king { background-image: url(pics/black_king-124.png); }
.black_queen { background-image: url(pics/black_queen-124.png); }
.black_pawn { background-image: url(pics/black_pawn-124.png); }




</style>
</head>
<body bgcolor="white" onload="waoc_load();">
<div id="squareboard" >
<?php

$color = $_GET["color"];

if (!$color){ $color="white"; }

switch($color){
	case "white": {
		for ($i=0; $i<8; $i++){
			for ($j=0; $j<8; $j++){
				if (($i + $j)%2 == 0) {
					$sqclass="white";	
				} else {
					$sqclass="black";	
				}
				print "<div id=\"square_${j}_${i}\" "
					."class=\"square $sqclass\" "
					."onClick=\"on_square_click(this.id);\" >"
					."$j - $i"
					."</div>\n";
			}
		}
		break;
	}
	case "black": {
		for ($i=7; $i >= 0; $i--){
			for ($j=7; $j >= 0; $j--){
				if (($i + $j)%2 == 0) {
					$sqclass="white";	
				} else {
					$sqclass="black";	
				}
				print "<div id=\"square_${j}_${i}\" "
					."class=\"square $sqclass\" "
					."onClick=\"on_square_click(this.id);\" >"
					."$j - $i"
					."</div>\n";
			}
		}
		break;
	}
	default: print "There is a problem...";
}
?>

</div>

<div id="logdiv"></div>
</body>
</html>
